<template>
  <a-modal
    :maskClosable="false"
    title="会员设置"
    centered
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form-model ref="form" :model="form" :rules="rules" layout="horizontal">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员名称:">
        <span>{{ form.memberName }}</span>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="会员职务:" prop="levelId">
        <a-select v-model="form.levelId" allowClear>
          <a-select-option :value="item.id" v-for="(item, index) in levelList" :key="index">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务专员:">
        <a-select v-model="form.attacheUserId" allowClear>
          <a-select-option v-for="item in attache_list" :value="item.id" :key="item.id"
            >{{ item.userName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="入会时间:" prop="joinTime">
        <a-date-picker v-model="form.joinTime" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="到期时间:" prop="memberEndTime">
        <a-date-picker v-model="form.memberEndTime" valueFormat="YYYY-MM-DD" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人标签:">
        <a-select
          v-model="form.groupIdList"
          mode="multiple"
          show-search
          option-filter-prop="children"
          :filter-option="filterOption"
          allowClear
        >
          <a-select-option v-for="item in groupingList" :value="item.id" :key="item.id"
            >{{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="单位在单位列表展示:">
        <a-switch v-model="form.companyShow" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="负责人在人脉列表展示:">
        <a-switch v-model="form.leadingShow" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="退会:">
        <a-switch v-model="form.memberState" />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
        <template slot="label">
          <span>会员排序</span>
          <a-popover title="会员排序说明" overlayClassName="poperlay-table">
            <template slot="content">
              <div class="_p-10" style="width: 550px">
                <a>会员排序方式由会员职务、会员排序序号、入会时间三项，一起联合判断进行排序。</a>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则1：</span>
                  <span>系统会优先根据会员职务排序进行排序，会员拥有的职务排序越靠前，会员排列越靠前；</span>
                </div>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则2：</span>
                  <span
                    >根据会员职务排序之后，同职务的会员将会根据会员排序序号进行排序，会员排序序号越大，会员排列越靠前；</span
                  >
                </div>
                <div class="_pt-5 _pb-5">
                  <span class="fw-6">规则3：</span>
                  <span
                    >根据会员排序序号排序之后，同职务同序号的会员，将会通过会员的入会时间进行排序，入会时间越早，会员排列越靠前</span
                  >
                </div>
              </div>
            </template>
            <a-icon type="question-circle" class="_ml-5 _mr-5" style="vertical-align: unset" />
          </a-popover>
        </template>
        <a-input-number v-model="form.sort" :min="1" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { memberPostList } from '@/api/member/memberType'
import { getTagUserList } from '@/api/member/grouping'
import { attacheList, memberLevelGetDownList } from '@/api/system/system'
import { UpdateByIdSettingInfo } from '@/api/member/member'
export default {
  components: {},
  data() {
    return {
      id: undefined,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      confirmLoading: false,
      type: '',
      form: {
        memberId: undefined,
        memberName: undefined,
        levelId: undefined,
        memberPostId: undefined,
        attacheUserId: undefined,
        joinTime: undefined,
        memberEndTime: undefined,
        groupIdList: [],
        leadingShow: true,
        companyShow: true,
        memberState: false,
        sort: 1
      },
      rules: {
        levelId: [{ required: true, message: '请选择会员职务', trigger: 'change' }],
        joinTime: [{ required: true, message: '请选择入会时间', trigger: 'change' }],
        memberEndTime: [{ required: true, message: '请选择到期时间', trigger: 'change' }],
        sort: [{ required: true, message: '请输入会员排序', trigger: 'change' }]
      },
      levelList: [],
      postList: [],
      attache_list: [],
      groupingList: [],
      switchs: ['leadingShow', 'companyShow']
    }
  },
  beforeCreate() {},
  created() {},
  methods: {
    show(data) {
      Object.keys(this.form).forEach(k => {
        if (this.switchs.includes(k)) {
          this.form[k] = data[k] === 1 ? true : false
        } else if (k === 'memberState') {
          this.form[k] = data[k] === 1 ? false : true
        } else if (k === 'groupIdList') {
          this.form[k] = data[k] || []
        } else this.form[k] = data[k]
      })
      this.MemberLevelGetDownList()
      this.getMemberPostList()
      this.getAttacheList()
      this.getGroupingList()
      this.visible = true
    },
    // 会员级别下拉
    async MemberLevelGetDownList() {
      let res = await memberLevelGetDownList()
      this.levelList = res.data || []
    },
    //第二职务下拉数据
    async getMemberPostList() {
      let res = await memberPostList()
      this.postList = res.rows || []
    },
    //服务专员下拉数据
    async getAttacheList() {
      let res = await attacheList({ attacheType: 'hyzy' })
      this.attache_list = res.data || []
    },
    //会员标签下拉数据
    async getGroupingList() {
      let res = await getTagUserList({ type: 0 })
      this.groupingList = res.data || []
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.confirmLoading = true
            let switchField = {}
            this.switchs.forEach(k => {
              switchField[k] = this.form[k] ? 1 : 0
            })
            await UpdateByIdSettingInfo({ ...this.form, ...switchField, memberState: this.form.memberState ? 0 : 1 })
            this.$message.success('修改成功')
            this.confirmLoading = false
            this.$emit('refresh')
            this.visible = false
          } catch (error) {
            this.confirmLoading = false
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.avatar-uploader > .ant-upload img {
  width: 86px;
  height: 86px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>

<style lang="less">
.poperlay-table {
  .ant-popover-content > .ant-popover-arrow {
    background: #323232;
    border-right-color: #323232;
    border-bottom-color: #323232;
  }
  .ant-popover-inner {
    background: #323232;
  }
  .ant-popover-title {
    color: #fff;
    border-bottom: 1px solid #666664;
  }
  .ant-popover-inner-content {
    color: #fff;
  }
}
</style>
